<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影院列表</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4729176_sdqzv2ofd8.css">
    <link rel="stylesheet" href="./css/public.css">
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
    }

    header {
        background-color: #fff;
        caret-color: transparent;
        color: #646566;
        text-align: center;
        /* padding: 10px; */
        
    }
    header .city-selection{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 10px;
    }
    header .city-selection span {
        margin: 0 10px;
        cursor: pointer;
        padding: 10px;
    }

    header .city-selection .active {
        color: #323233;
        border-bottom: 2px solid red;
        
    }

    main {
        padding:0;
        background-color: white;
    }

    .cinema-list {
        margin-top: 5px;
    }

    .cinema-item {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .cinema-item h3 {
        font-size: 18px;
        margin: 0;
    }

    .cinema-item p {
        margin: 5px 0;
    }
    section {
        display: none;
    }
    section.active {
        display: block;
    }
    .tags {
        display: flex;
        gap: 5px;
        margin: 10px 0;
    }

    .tags span {
        background-color: #f0f0f0;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 12px;
    }

    
</style>
<body>
    <header>
        <div class="city-selection">
            <span onclick="changeNav(1)" data-section="1">北京</span>
            <span onclick="changeNav(2)" data-section="2">上海</span>
            <span onclick="changeNav(3)" data-section="3">广州</span>
            <span class="active" onclick="changeNav(4)" data-section="4">深圳</span>
        </div>
    </header>
    
    <main>
        <section class="cinema-list active" id="section1">
            <div class="cinema-item">
                <h3>英皇电影城（东海缤纷店）</h3>
                <p>深圳市福田区东海缤纷天地商场B1层</p>
                <p>¥104 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <div class="kaika flex aic">
                    <p style="width: 18px;height: 18px;background-color: rgb(87,192,248);text-align: center;line-height: 18px;border-radius: 5px;" class="f10 fff ">卡</p>
                    <p class="pl-5">开卡特惠，首单1张最高立减4元</p>
                </div>
            </div>
            <div class="cinema-item">
                <h3>中影国际影城（深圳印力中心店）</h3>
                <p>广东省深圳市福田区农林路69号印力中心3楼（原深国投广场）</p>
                <p>¥53 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>江湖影院侨香店</h3>
                <p>广东省深圳市福田区香蜜湖街道安托山七路海阔商业服务体L4-1</p>
                <p>¥51 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>星美影商城（深圳京基IMAX店）</h3>
                <p>深圳市福田区滨河大道9289号KKONE购物中心F4</p>
                <p>¥30 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>星美影商城（深圳福体店）</h3>
                <p>广东省深圳市福田区福强路3030号福田体育公园负一层</p>
                <p>¥29 元起</p>
                <div class="cinema-item">
                    <div class="tags">
                        <span>退</span>
                        <span>改签</span>
                        <span>小吃</span>
                        <span>折扣卡</span>
                    </div>
                    <p>开卡特惠，首单1张最高立减4元</p>
                </div>
            </div>
        </section>
        <section class="cinema-list active" id="section2">
            <div class="cinema-item">
                <h3>英皇电影城（东海缤纷店）</h3>
                <p>深圳市福田区东海缤纷天地商场B1层</p>
                <p>¥104 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <div class="kaika flex aic">
                    <p style="width: 18px;height: 18px;background-color: rgb(87,192,248);text-align: center;line-height: 18px;border-radius: 5px;" class="f10 fff ">卡</p>
                    <p class="pl-5">开卡特惠，首单1张最高立减4元</p>
                </div>
            </div>
            <div class="cinema-item">
                <h3>中影国际影城（深圳印力中心店）</h3>
                <p>广东省深圳市福田区农林路69号印力中心3楼（原深国投广场）</p>
                <p>¥53 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>江湖影院侨香店</h3>
                <p>广东省深圳市福田区香蜜湖街道安托山七路海阔商业服务体L4-1</p>
                <p>¥51 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>星美影商城（深圳京基IMAX店）</h3>
                <p>深圳市福田区滨河大道9289号KKONE购物中心F4</p>
                <p>¥30 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>星美影商城（深圳福体店）</h3>
                <p>广东省深圳市福田区福强路3030号福田体育公园负一层</p>
                <p>¥29 元起</p>
                <div class="cinema-item">
                    <div class="tags">
                        <span>退</span>
                        <span>改签</span>
                        <span>小吃</span>
                        <span>折扣卡</span>
                    </div>
                    <p>开卡特惠，首单1张最高立减4元</p>
                </div>
            </div>
        </section>
        <section class="cinema-list active" id="section3">
            <div class="cinema-item">
                <h3>英皇电影城（东海缤纷店）</h3>
                <p>深圳市福田区东海缤纷天地商场B1层</p>
                <p>¥104 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <div class="kaika flex aic">
                    <p style="width: 18px;height: 18px;background-color: rgb(87,192,248);text-align: center;line-height: 18px;border-radius: 5px;" class="f10 fff ">卡</p>
                    <p class="pl-5">开卡特惠，首单1张最高立减4元</p>
                </div>
            </div>
            <div class="cinema-item">
                <h3>中影国际影城（深圳印力中心店）</h3>
                <p>广东省深圳市福田区农林路69号印力中心3楼（原深国投广场）</p>
                <p>¥53 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>江湖影院侨香店</h3>
                <p>广东省深圳市福田区香蜜湖街道安托山七路海阔商业服务体L4-1</p>
                <p>¥51 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>星美影商城（深圳京基IMAX店）</h3>
                <p>深圳市福田区滨河大道9289号KKONE购物中心F4</p>
                <p>¥30 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>星美影商城（深圳福体店）</h3>
                <p>广东省深圳市福田区福强路3030号福田体育公园负一层</p>
                <p>¥29 元起</p>
                <div class="cinema-item">
                    <div class="tags">
                        <span>退</span>
                        <span>改签</span>
                        <span>小吃</span>
                        <span>折扣卡</span>
                    </div>
                    <p>开卡特惠，首单1张最高立减4元</p>
                </div>
            </div>
        </section>
        <section class="cinema-list active" id="section4">
            <div class="cinema-item">
                <h3>英皇电影城（东海缤纷店）</h3>
                <p>深圳市福田区东海缤纷天地商场B1层</p>
                <p>¥104 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <div class="kaika flex aic">
                    <p style="width: 18px;height: 18px;background-color: rgb(87,192,248);text-align: center;line-height: 18px;border-radius: 5px;" class="f10 fff ">卡</p>
                    <p class="pl-5">开卡特惠，首单1张最高立减4元</p>
                </div>
            </div>
            <div class="cinema-item">
                <h3>中影国际影城（深圳印力中心店）</h3>
                <p>广东省深圳市福田区农林路69号印力中心3楼（原深国投广场）</p>
                <p>¥53 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>江湖影院侨香店</h3>
                <p>广东省深圳市福田区香蜜湖街道安托山七路海阔商业服务体L4-1</p>
                <p>¥51 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>星美影商城（深圳京基IMAX店）</h3>
                <p>深圳市福田区滨河大道9289号KKONE购物中心F4</p>
                <p>¥30 元起</p>
                <div class="tags">
                    <span>退</span>
                    <span>改签</span>
                    <span>小吃</span>
                    <span>折扣卡</span>
                </div>
                <p>开卡特惠，首单1张最高立减4元</p>
            </div>
            <div class="cinema-item">
                <h3>星美影商城（深圳福体店）</h3>
                <p>广东省深圳市福田区福强路3030号福田体育公园负一层</p>
                <p>¥29 元起</p>
                <div class="cinema-item">
                    <div class="tags">
                        <span>退</span>
                        <span>改签</span>
                        <span>小吃</span>
                        <span>折扣卡</span>
                    </div>
                    <p>开卡特惠，首单1张最高立减4元</p>
                </div>
            </div>
        </section>
    </main>
    
    <footer>
        <a class="item" href="index.html">
            <i class="iconfont icon-dianying"></i>
            <span>电影</span>
        </a>
        <a class="item" href="cinema.html">
            <i class="iconfont icon-yingyuan"></i>
            <span>影院</span>
        </a>
        <a class="item" href="video.html">
            <i class="iconfont icon-shipin"></i>
            <span>视频</span>
        </a>
        <a class="item" href="my.html">
            <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </a>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 设置底部导航栏的 active 状态
        document.querySelectorAll('footer .item').forEach(item => {
            item.addEventListener('click', function(event) {
                event.preventDefault(); // 阻止默认跳转
                document.querySelectorAll('footer .item').forEach(el => {
                    el.classList.remove('active');
                });
                this.classList.add('active');

                // 获取 href 属性并跳转
                const href = this.getAttribute('href');
                window.location.href = href; // 动态跳转到目标页面
            });
        });

        // 设置城市选择的 active 状态
        document.querySelectorAll('header .city-selection span').forEach(span => {
            span.addEventListener('click', function() {
                document.querySelectorAll('header .city-selection span').forEach(el => {
                    el.classList.remove('active');
                });
                this.classList.add('active');
            });
        });

        // 页面加载时设置底部导航栏的 active 状态
        document.addEventListener('DOMContentLoaded', () => {
            const currentPage = window.location.pathname.split('/').pop(); // 获取当前页面文件名
            document.querySelectorAll('footer .item').forEach(item => {
                const href = item.getAttribute('href');
                if (href === currentPage) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });
        });


        function changeNav(sectionId) {
            document.querySelectorAll('header .city-selection span').forEach(span => {
                span.classList.remove('active');
            });
            document.querySelector(`header .city-selection span[data-section="${sectionId}"]`).classList.add('active');

            document.querySelectorAll('section').forEach(section => {
                section.classList.remove('active');
            });
            document.getElementById(`section${sectionId}`).classList.add('active');
        }

        document.addEventListener('DOMContentLoaded', () => {
            // 动态加载电影院列表
            const sections = document.querySelectorAll('section.cinema-list');
            sections.forEach((section, index) => {
                const sectionId = index + 1;
                axios.get(`http://43.136.85.99:3008/cinema/list?cityId=${sectionId}`)
                    .then(response => {
                        if (response.data.code === 666 && response.data.msg === "success") {
                            renderCinemaList(section, response.data.data);
                        } else {
                            console.error('Failed to fetch cinema data:', response.data.msg);
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching cinema data:', error);
                    });
            });
        });

        function renderCinemaList(section, data) {
            const html = data.map(cinema => `
                <div class="cinema-item">
                    <h3>${cinema.name}</h3>
                    <p>${cinema.address}</p>
                    <p>¥${cinema.price} 元起</p>
                    <div class="tags">
                        ${cinema.tags.map(tag => `<span>${tag}</span>`).join('')}
                    </div>
                    <p>${cinema.promotion}</p>
                </div>
            `).join('');
            section.innerHTML = html;
        }
    </script>
</body>
</html>